<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的会员</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bossIndex.css">
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/fontsize.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/vue/vant.js"></script>
</head>
<body>
<div class="container_box" id="app">
    <header>
        <div class="search bar3">
            <form @submit.prevent action="#">
                <input @keyup.enter.native="search" v-model="from.phone" type="search" placeholder="搜索会员姓名/手机号码">
                <button @click="search" type="text"><img src="images/search.png"></button>
            </form>
        </div>
    </header>
    <div class="add_jl" @click="addMember()">
        <img src="images/add_jl.png">
    </div>
    <template v-for="item in memberList">
        <div class="group_details group_details_state clearfix" @click="details(item.Uid)">
            <div class="fl head_card">
                <img :src="item.Picurl" alt="" class="spinning_img">
            </div>
            <div class="spinning_txt fl">
                <div class="margin_bottom" style="display: flex;align-items:center; justify-content: space-between;padding-left: 0.1rem;">
                    <div style="display: flex;align-items: center;">
                        <span>{{item.Username}}</span>
                        <img src="images/woman.png"/ v-if="item.Sex == 0" style="width: 0.14rem;height: 0.14rem;margin-left: 0.1rem;">
                        <img src="images/man1.png"/ v-else style="width: 0.14rem;height: 0.14rem;margin-left: 0.1rem;">
                    </div>
                    <span>
                        <span>会籍:</span>
                        <span>{{item.Sname}}</span>
                    </span>
                </div>
                <p style="margin-bottom: 0.1rem;">
                    <span class="spinning_name">{{item.Phone}}</span>
                    <span class="font_size12 rf">
                        <span>持卡数</span>
                        <span>{{item.Cardnum}}</span>
                    </span>
                </p>
            </div>
        </div>
    </template>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
        >
        <van-cell
            v-for="item in lists"
            :key="item"
            :title="item"
        />
    </van-list>
</div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        memberList:[],
        lists:[],
        loading: false,
        finished: false,
        totalnum:'',
        page:'',
        listd:[],
        from:{
            page:'1',
            phone:''
        }
    },
    methods: {
        getList(){
            const params=this.from
            axios.get('mobileapi/boss/user.php?act=list',{params:params}).then(res => {
                let { msg, code} = res.data
                    if (code !== 200) {
                        vant.Toast('请求发送失败，请重试')
                    } else {
                        data=res.data
                        this.listd=data.data.list
                        this.totalnum=data.data.totalnum
                        this.from.page=parseInt(data.data.page)+1
                        for(let i in this.listd){
                            if(this.listd[i].Picurl==""||this.listd[i].Picurl==null){
                                this.listd[i].Picurl='images/moren.png'
                            }
                        }
                        for (let i = 0; i < this.listd.length; i++) {
                            this.memberList.push(this.listd[i])
                        }
                        // 加载状态结束
                        this.loading = false
                        // 数据全部加载完成
                        if (this.memberList.length >= this.totalnum) {
                            this.finished = true
                        }
                    }
            }).catch(err => {
                vant.Toast('请求发送失败，请重试')
            })
        },
        //跳转详情页
        details(Uid){
            window.location.href=`memberDetails.html?id=${Uid}`
        },
        addMember(){
            window.location.href="addMember.html"
        },
        //搜索
        search(){
            this.memberList=[]
            this.lists=[]
            this.listd=[]
            this.from.page='1'
            this.getList()
        }
    },
})
</script>
</html>